<script setup lang="ts">
import JinDrawer from "@/components/framework/jin-drawer/jin-drawer.vue";
import { reactive, ref } from "vue";
import type { UserListType } from "@/types/UserType.ts";
import { roleCancelUserApi, roleUserApi } from "@/services/roleApi.ts";
import RoleAssignUser from "@/pages/system/Role/role-assign-user.vue";
import { tableBorder } from "@/utils/border/table-border.ts";
import { PaginationProps, Message } from "@arco-design/web-vue";
import useModal from "@/hooks/useModal.ts";
const { ModalShow, ModalHide } = useModal();

const assignUserRef = ref<{
  init: () => void;
}>();

const roleId = ref<string>("");

const data = ref<UserListType[]>([]);

const pagination = reactive<PaginationProps>({
  total: 0,
  current: 1,
  pageSize: 10,
  showTotal: true,
});

const formSearch = reactive({
  current: 1,
  size: 999999,
  username: "",
});

const loading = ref(false);

const drawer = ref<{
  init: () => void;
  close: () => void;
}>();

const handleCancel = () => {
  drawer.value?.close();
};

const handleOk = () => {
  handleCancel();
};

const handleCancelAllot = (row: UserListType) => {
  ModalShow({
    content: "是否确定取消关联",
  }).then(() => {
    roleCancelUserApi({
      userId: row.id,
      roleId: roleId.value,
    }).then((res) => {
      if (res.code === 200) {
        queryData();
        ModalHide();
        Message.success(res.data);
      } else {
        ModalHide();
      }
    });
  });
};

const queryData = () => {
  roleUserApi({
    ...formSearch,
    id: roleId.value,
  }).then((res) => {
    data.value = res.data.records;
    pagination.total = res.data.total;
    pagination.current = res.data.current;
    pagination.pageSize = res.data.size;
  });
};
// 分页查询
const handlePageChange = (page: number) => {
  formSearch.current = page;
  queryData();
};

// 查询
const handleSearch = () => {
  handlePageChange(1);
};
// 重置
const handleReset = () => {
  formSearch.username = "";
  handleSearch();
};

const init = (id: string) => {
  roleId.value = id;
  formSearch.username = "";
  queryData();
  drawer.value?.init();
  loading.value = false;
};

const handleAllot = () => {
  assignUserRef.value?.init();
};

defineExpose({
  init,
});

const columns = [
  {
    title: "用户账号",
    dataIndex: "username",
    width: 180,
    align: "center",
  },
  {
    title: "用户姓名",
    dataIndex: "realname",
    width: 180,
    align: "center",
  },
  {
    title: "状态",
    slotName: "status",
    width: 80,
    align: "center",
  },
  {
    title: "操作",
    slotName: "operate",
    width: 160,
    align: "center",
  },
];

function getStatusString(status: 0 | 1 | null) {
  if (status === 1) {
    return "禁用";
  }
  if (status === 0) {
    return "正常";
  }
  if (status === null) {
    return "暂无";
  }
}

const getColor = (status: 0 | 1 | null) => {
  // 根据状态返回不同的type
  switch (status) {
    case 1:
      return "#f53f3f";
    case 0:
      return "#00b42a";
  }
};
</script>

<template>
  <jin-drawer
    ref="drawer"
    title="用户分配"
    :isBeforeOk="false"
    :loading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form auto-label-width>
      <a-row :gutter="24">
        <a-col :span="17">
          <a-form-item label="用户账号">
            <a-input
              v-model="formSearch.username"
              allow-clear
              placeholder="请输入用户账号"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="7">
          <a-space>
            <a-button
              type="primary"
              @click="handleSearch"
            >
              <template #icon>
                <icon-search />
              </template>
              <span>查询</span>
            </a-button>
            <a-button @click="handleReset">
              <template #icon>
                <icon-refresh />
              </template>
              <span>重置</span>
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-form>
    <div class="tabletools">
      <a-space>
        <a-button
          type="primary"
          @click="handleAllot"
        >分配用户</a-button>
      </a-space>
    </div>
    <a-table
      style="user-select: none;"
      :columns="columns"
      :bordered="tableBorder"
      :pagination="pagination"
      :data="data"
      @page-change="handlePageChange"
    >
      <template #status="{ record }">
        <a-tag :color="getColor(record.status)">{{ getStatusString(record.status) }}</a-tag>
      </template>
      <template #operate="{ record }">
        <a-space>
          <a-button
            type="primary"
            @click="handleCancelAllot(record)"
          >取消关联</a-button>
        </a-space>
      </template>
    </a-table>
    <role-assign-user
      ref="assignUserRef"
      :roleId="roleId"
      @list="queryData"
      :data="data"
    />
  </jin-drawer>
</template>

<style scoped lang="scss">
</style>